<template>
    <div class="group relative p-0.5 rounded-xl border-white duration-500 hover:bg-red-100/40" ref="containerTarget">
        <div>
            <!-- 搜索图标 -->
            <my-svg-icon class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] left-2" name="search"
                color="#707070"></my-svg-icon>
            <!-- 输入框 -->
            <input type="text" placeholder="搜索" class="block duration-100 w-full h-[44px] text-sm pl-4 outline-0 bg-zinc-100 text-zinc-900 rounded-xl tracking-wide font-semibold 
                border-zinc-100 border focus:border-red-300 group-hover:bg-white hover:border-zinc-200 "
                v-model="inputValue" @keyup.enter="searchText" @focus="onFocus" @blur="onBlur">
            <!-- 删除按钮 -->
            <my-svg-icon name="input-delete"
                class="opacity-0 h-1.5 w-1.5 absolute translate-y-[-50%] top-[50%] right-7 cursor-pointer  duration-100 group-hover:opacity-100"
                v-show="inputValue" @click="clearText">
            </my-svg-icon>
            <!-- 分割线 -->
            <div
                class=" opacity-0 h-1.5 w-[1px] absolute translate-y-[-50%] top-[50%] right-[62px] duration-500 bg-zinc-200 group-hover:opacity-100">
            </div>
            <!--  搜索按钮(通用组件) -->
            <my-button
                class=" opacity-0 absolute translate-y-[-50%] top-[50%] right-1 rounded-full duration-500 group-hover:opacity-100"
                icon="search" iconColor="#ffffff" @click="searchText"></my-button>
        </div>
        <!-- 下拉 -->
        <transition name="slide">
            <div v-if="$slots.dropdown" v-show="isFocus"
                class="max-h-[368px] w-full text-base overflow-auto bg-white absolute z-20 left-0 top-[46px] p-2 border border-zinc-200 duration-150 hover:shadow-2xl">
                <slot name="dropdown"></slot>
            </div>
        </transition>
    </div>
</template>
<script>
// 定义响应式数据
const EMITS_UPDATE_MODEL = 'update:modelValue'

// search 搜索
const EMIT_SEARCH = 'search'

// 删除所有文本
const EMIT_CLEAR = 'clear'

// 输入事件
const EMIT_INPUT = 'input'

// 获取焦点事件
const EMIT_FOCUS = 'focus'

// 失去焦点事件
const EMIT_BLUR = 'blur'

</script>

<script setup>
import { useVModel, onClickOutside } from '@vueuse/core';
import { ref, watch } from 'vue-demi';
// 1 输入内容实现双向数据绑定
// 2 搜索按钮在 hover 展示
// 3 一键清空文本
// 4 触发搜索
// 5 控制下拉展示
// 6 事件处理
const props = defineProps({
    modelValue: {
        required: true,
        type: String
    }
})

const emits = defineEmits([EMITS_UPDATE_MODEL, EMIT_SEARCH, EMIT_CLEAR, EMIT_INPUT, EMIT_FOCUS, EMIT_BLUR])
const inputValue = useVModel(props)

// 监听用户输入行为
watch(inputValue, (val) => {
    emits(EMIT_INPUT, val)
})
// 清除文本输入框的值
const clearText = () => {
    inputValue.value = ''
    emits(EMIT_CLEAR, '')
}
// 搜索
const searchText = () => {
    if (inputValue.value == '') return
    emits(EMIT_SEARCH, inputValue.value)
}
// input 是否获取焦点
const isFocus = ref(false)
const containerTarget = ref(null)
// 获取焦点
const onFocus = () => {
    isFocus.value = true
    emits(EMIT_FOCUS)
}
// 失去焦点
const onBlur = () => {
    emits(EMIT_BLUR)
}

// 点击区域外隐藏
onClickOutside(containerTarget, () => {
    isFocus.value = false
})
</script>

<style lang="scss" scoped>
.slide-enter-active,
.slide-leave-active {
    transition: all 0.3s;
}

.slide-enter-from,
.slide-leave-to {
    opacity: 0;
    transform: translateY(40px);
}
</style>